<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.bigBox{ position: relative; width: 100%; height: 100%;}
			.box{ 
			  width: 150px;
	          height: 150px;
	          position: absolute;
	          top: 10px;
	          left: 65px;
	          background: yellow;
	          opacity: 0.5;
	          z-index: 9;
              cursor: move;
			}
		</style>
	</head>
	<body>
		<div class="bigBox">
			<div class="box"></div>
		</div>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
		<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>
		<script>	
		    $(function() {
		    	var tscale=1
		    	var aBox= $('.box')
		    	var bigBox= $('.bigBox')
		    	var oldW=aBox.width(),oldH=aBox.height();
		    	var bili=1
		    	aBox.mousewheel(function(event, delta) { 
		    		//console.log(event, delta); 
				     if (delta >= 1) 
				     	tscale += 0.1;      
				    else
				    	tscale -= 0.1;
//                  console.log(event.pageX); 

				     tscale = tscale > 3 ? 3 : tscale;
	                 tscale = tscale < 0.5 ? 0.5 : tscale;
	                 bili=15*(tscale*10)
	                 console.log(bili=15*(tscale*10))
	                 aBox.css({'transform': 'scale(' + tscale + ')' });
				});
		        //使用on监听滚轮事件
//		        $('.box').on('mousewheel', function(event) 
				aBox.mousedown(function(e){
					  	e.preventDefault(); 
					  	var left=$(this).offset().left;
					  	var top=$(this).offset().top;
					  	
				        console.log(tscale==1)
	
			            if( tscale != 1 ){
			            	left=aBox.offset().left-(oldW-bili)/2;
			            	top=aBox.offset().top-(oldH-bili)/2
			            }
			            
					    var positionDiv = $(this).offset();
					    var distenceX = e.originalEvent.pageX - left;
					    var distenceY = e.originalEvent.pageY - top;
					    
					    $(document).mousemove(function(e){
					    	e.preventDefault();  
				    	
				      var x = e.pageX - distenceX;
				      var y = e.pageY - distenceY;
	
//				      if(x<0){
//				        x=0;
//				      }else if(x>bigBox.width()-aBox.outerWidth(true)){
//				        x = bigBox.width()-aBox.outerWidth(true);
//				      }
//				      if(y<0){
//				        y=0;
//				      }else if(y>bigBox.height()-aBox.outerHeight(true)){
//				        y = bigBox.height()-aBox.outerHeight(true);
//				      }
				      aBox.css({
				        'left':x+'px',
				        'top':y+'px'
				      });
				    });
				    $(document).mouseup(function(){
						e.preventDefault(); 
						$(document).unbind('mousemove');
						$(document).unbind('mouseup');
				
				    });
				  })
                  
		      });

		</script>
	</body>
</html>
